<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=UTF-8");
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
%>
<html>
<head>
<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />	
		<title>car2go，马上接力</title>
		<link rel="stylesheet" href="<%=path%>/css/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=path%>/css/public.css" />
		<link rel="stylesheet" href="<%=path%>/css/validationEngine.jquery.css" />
		<script type="text/javascript" src="<%=path%>/js/jquery-2.2.3.min.js" ></script>
	    <script type="text/javascript" src="<%=path%>/js/bootstrap.min.js" ></script>
	    
	    
</head>
<body class="sy_bd">
	<div class="allhead">
				<div class="bd">
					<div class="city2">
						<img src="<%=path%>/img/city2.png" alt="" /><img src="<%=path%>/img/city2.png" alt="" />
					</div>
				</div>
				<div class="paodao2"><img src="<%=path%>/img/paodao2.png" alt="" class="pic-pd"/></div>
				<div class="car2"><img src="<%=path%>/img/car.png" alt="" />
					<img src="<%=path%>/img/luntai.png" alt="" class="lunt lunt-left"/>
					<img src="<%=path%>/img/luntai.png" alt="" class="lunt lunt-right"/>
					
				</div>
			</div>
		<form action="<%=path%>/relay/updateRelay" method="post" id="fo" enctype="multipart/form-data">
		<div >
			    <input type="hidden" value="${opid }" name="recipientOpenid"/>
			    <input type="hidden" value="${nickName }" name="recipient"/>
			     <input type="hidden" value="${relayNo }" name="relayNo"/>
	         </div>  
			<div class="finish">
				<ul class="front-img  image_container">
				    <li><img src="<%=path%>/${relay.photo1 }" alt="" /></li>
				    <li><img src="<%=path%>/${relay.photo2 }" alt="" /></li>
				    <li><img src="<%=path%>/${relay.photo3 }" alt="" /></li>
				</ul>
				
			</div>
			<div class="put_bd margin_top-20px">
				<%-- <div class="title_pic"><img src="<%=path%>/img/w3.png" alt="" /></div>
				<div class="bd" style="text-indent: 1%;">
					${relay.relayAddress }
				</div> --%>
				<div class="title_pic"><img src="<%=path%>/img/w13.png" alt="" style='width:49%;padding-left:1.5%;'/></div>
				<div class="bd" style="text-indent:1%;" >
				<input type="text" name="recipientNum" id="area"  class="validate[required,minSize[11],maxSize[11],custom[phone]]" showOneMessage="无效的注册手机号" data-prompt-position="bottomLeft"/>
				</div>
			</div>
			<div class="filepic">
				<p>请上传照片，开始接龙 </p>
				<div style="float:center;font-size:10px;">
				<p>(至少上传一张包含车牌号的照片)</p></div>
				<div style="margin-bottom: 60px;">
						
						<div style="position: relative;">
							<a href="#" class="a-upload" id="im1">
								<input id="file_upload1" type="file" name="pic"   />
								<div class="image_container">
									<img id="preview1" >
								</div>
								<div class="words">车牌信息</div>          
							</a>
							<input type="hidden" id="picPath1" name="pic1"   />
							<!-- <div class="del del-one">
								<div class="del-list" id='del-list1'>
									<span class="bg"><span class="fa fa-trash" aria-hidden="true"></span>
									<span style="padding:0 4px;">删除</span></span>
									<input type="hidden" id="picPath1" name="pic1" />
								</div>
							</div> -->
						</div>	    
											

						<div style="position: relative;">	
	
							<a href="#" class="a-upload" id="im2">
								<input id="file_upload2" type="file" name="pic"  /> 
								<div class="image_container">
									<img id="preview2" >
								</div>
								<div class="words">停车位置</div>         
							</a>
							<input type="hidden" id="picPath2" name="pic2"  />
							<!-- <div class="del del-two">
								<div class="del-list" id='del-list2'>
									<span class="bg">
										<span class="fa fa-trash" aria-hidden="true"></span>
										<span style="padding:0 4px;">删除</span>
										<input type="hidden" id="picPath2" name="pic2" />
									</span>
								</div>
							</div> -->
						</div>
	
						<div style="position: relative;">		
							<a href="#" class="a-upload" id="im3">	
								<input id="file_upload3" type="file"  name="pic"   /> 
								<div class="image_container">
								    <img id="preview3" >
								</div>
								<div class="words">标志景物</div>
							</a>
							<input type="hidden" id="picPath3" name="pic3"  />
							<!-- <div  class="del  del-three">
								<div class="del-list" id='del-list3'>
									<span class="bg">
									   <span style="padding:0 4px;">删除</span>
									   <input type="hidden" id="picPath3" name="pic3" />
									</span>
								</div>
							</div> -->
						</div>

						<div style="display: none;" class="bigpic">
							<div style="position: fixed;background: #000; z-index: 999; width:100%; height:100%; top:0; left:0; text-align: center; display: table;">
							    <span style=" display:table-cell;vertical-align:middle;">
							    	<img src="" alt="" style="width:100%;" class="big-img"/>
							    </span>
							</div>
						</div>                                      
				</div>			
			</div>
			<div class="anniu">
				<a href="javascript:void(0);" onclick="sub();"><img src="<%=path%>/img/jl-btn.png" alt="" /></a>
				
			</div>
			<!-- <div class="filepic" style="margin:0 auto;color:#FFF;" >
			 <p>双方都开车达3km以上才能获得即行券奖励哦</p> 
			</div> -->
		</form>
		<script type="text/javascript" src="<%=path%>/js/pic.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/lrz.bundle.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/1.chunk.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/2.chunk.js" ></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
		<script type="text/javascript"	src="<%=path%>/js/jquery.validationEngine.js"></script>
		<script type="text/javascript"	src="<%=path%>/js/jquery.validationEngine-zh_CN.js"></script>	
		<script>
		 $(document).ready(function(){
			 $("#fo").validationEngine({
				  maxErrorsPerField: 1
			  });
		 });
		 function sub(){
			 var t1 = $("#file_upload1").val();
			 var t2 = $("#file_upload2").val();
			 var t3 = $("#file_upload3").val();
			 /* if(t1==null || t1==""){
				 alert("请选择上传图片");
				 return false;
			 } */
			 if(t1==null && t2==null && t3==null){
				 alert("照片中需要至少包括车牌号或车辆编号");
				 return false;
			 }else if(t1=="" && t2=="" && t3==""){
				 alert("照片中需要至少包括车牌号或车辆编号");
				 return false;
			 }
			 var p1 = $("#picPath1").val();
			   /* if(p1==null ||p1=="" ){
				   alert("图片上传中");
					return false;
				} */
			   var p2 = $("#picPath2").val();
			   var p3 = $("#picPath3").val();
			   if(p1==null && p2==null && p2==null ){
				   alert("图片上传中");
				   return false;
			   }else if( p1=="" && p2=="" && p3==""){
				   alert("图片上传中");
				   return false;
			   } 
			   if(t1!="" && p1==""){
				   alert("图片上传中");
				   return false;
			   }
			   if(t2!="" && p2==""){
				   alert("图片上传中");
				   return false;
			   }
			   if(t3!="" && p3==""){
				   alert("图片上传中");
				   return false;
			   }
			   $("#fo").submit();
		   }
		    $(window).load(function() {
				var cityHeight=$('.allhead .bd .city2 img').height()/6*5;
				$('.allhead .bd').height(cityHeight);
				var pdHeight=$('.allhead .paodao2 img').height();
				$('.allhead .paodao2').height(pdHeight);
				var ulWidth=$('.front-img li').width();
				$('.front-img li').height(ulWidth);
				var fotWidth=$('.front-img li').width();
				$('.front-img li img').height(fotWidth);

            });
		</script>
		<script type="text/javascript">
		//微信jssdk config
		wx.config({
			debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId : '${appid}', // 必填，公众号的唯一标识
			timestamp : '${timestamp}', // 必填，生成签名的时间戳
			nonceStr : '${noncestr}', // 必填，生成签名的随机串
			signature : '${signature}',// 必填，签名，见附录1
			jsApiList : [ 'checkJsApi', //判断当前客户端版本是否支持指定JS接口
			'onMenuShareTimeline', //分享给好友
			'onMenuShareAppMessage', //分享到朋友圈
			]
		// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		wx.ready(function() { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
					wx.onMenuShareTimeline({ //分享到朋友圈的API  
								title : '接招！car2go接力go', // 分享标题
								link : 'http://run.xuanzhen-tech.com/car2go_wx/core/toRight.html', // 分享链接
								imgUrl : 'http://run.xuanzhen-tech.com/car2go_wx/img/titlex.png', // 分享图标
								success : function() {
									// 用户确认分享后执行的回调函数
								},
								cancel : function() {
									// 用户取消分享后执行的回调函数
								}
							});
					wx.onMenuShareAppMessage({//分享到朋友 
								title : '接招！car2go接力go', // 分享标题
								desc : 'car2go接力go', // 分享描述
								link : 'http://run.xuanzhen-tech.com/car2go_wx/core/toRight.html', // 分享链接
								imgUrl : 'http://run.xuanzhen-tech.com/car2go_wx/img/titlex.png', // 分享图标
								type : 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
								success : function() {
									// 用户确认分享后执行的回调函数
								},
								cancel : function() {
									// 用户取消分享后执行的回调函数
								}
							});
				});
		</script>
</body>
</html>